<template>
  <div class="login">
    <div id="top">
      <span class="iconfont s1">&#xe603;</span>
      <span class="s2">手机注册</span>
      <p>
        <span class="iconfont">&#xe64a;</span>
        <span class="iconfont">&#xe614;</span>
        <span class="line"></span>
      </p>
    </div>
    <!-- main -->
    <main>
      <img :src="img" alt="" />
      <p>手机号&nbsp;&nbsp;<input type="text" v-model="user.phone" /></p>
      <p>昵称&nbsp;&nbsp;<input type="text" v-model="user.nickname" /></p>
      <p>密码&nbsp;&nbsp;<input type="password" v-model="user.password"/></p>
      <button @click="register" class="reg">注 册</button>
    </main>
    <p class="line"></p>
  </div>
</template>


<script>
import { Toast } from "vant";
import { register } from "../../utils/api";
export default {
  data() {
    return {
      img: require("../../assets/img/logo.jpg"),
      user: {
        phone: "",
        password: "",
        nickname: "",
      },
    };
  },
  methods: {
    register() {
      if (
        this.user.phone != "" &&
        this.user.password != "" &&
        this.nickname != ""
      ) {
        register(this.user).then((res) => {
          console.log(res);
          Toast.success(res.data.msg);
        });

        this.$router.push("/login");
      } else {
        Toast.fail("用户名,密码,昵称不能为空");
      }
    },
  },
};
</script>


<style scoped>
body {
  width: 7.5rem;
  height: 100vh;
  margin: auto;
  flex-direction: column;
}
/*top*/
#top {
  height: 0.64rem;
  padding: 0.32rem 0.12rem 0.32rem 0.34rem;
  background: #ff6040;
  display: flex;
  align-items: center;
}
#top span {
  font-size: 0.32rem;
  color: #ffdfd8;
  line-height: 0.64rem;
}
#top span.s1 {
  margin-right: 2.5rem;
}
#top span.s2 {
  margin-right: 1.2rem;
}
#top p {
  width: 1.74rem;
  height: 0.64rem;
  border: #ff8a6f solid 1px;
  box-sizing: border-box;
  border-radius: 0.32rem;
  display: flex;
  position: relative;
}
#top p span {
  width: 0.87rem;
  text-align: center;
}
#top p .line {
  width: 1px;
  height: 0.37rem;
  background: #ff896e;
  position: absolute;
  bottom: 0.12rem;
  left: 2.2rem;
}
/*main*/
main {
  margin: 0.2rem 0.2rem 0;
  background: #fff;
  flex: 1;
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main img {
  height: 0.96rem;
  width: 3.63rem;
  margin-top: 3.08rem;
}
main p:nth-child(2) {
  width: 6.12rem;
  border-bottom: 0.02rem solid #f7f7f7;
}
main p:nth-child(2) input {
  height: 0.78rem;
  border: none;
  margin-top: 0.54rem;
}
main p:nth-child(2) input::placeholder {
  font-size: 0.24rem;
  color: #666666;
}
main p:nth-child(3) {
  width: 6.12rem;
  border-bottom: 0.02rem solid #f7f7f7;
}
main p:nth-child(3) input {
  width: 4.51rem;
  border: none;
  height: 0.78rem;
}
main p:nth-child(3) input::placeholder {
  font-size: 0.22rem;
  color: #666;
}
main p:nth-child(4) {
  width: 6.12rem;
  border-bottom: 0.02rem solid #f7f7f7;
}
main p:nth-child(4) input {
  width: 4.51rem;
  border: none;
  height: 0.78rem;
}
main p:nth-child(4) input::placeholder {
  font-size: 0.22rem;
  color: #666;
}
main p:nth-child(3) a {
  width: 1.6rem;
  height: 0.48rem;
  background: #cccccc;
  font-size: 0.2rem;
  color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 0.48rem;
}
main button {
  width: 6.1rem;
  height: 0.98rem;
  background: #ccc;
  border: none;
  margin-top: 0.4rem;
}
main span {
  font-size: 0.3rem;
  color: #fff;
  font-weight: bold;
  margin-top: -0.72rem;
}
main span i {
  margin-right: 0.82rem;
}
.line {
  width: 2.68rem;
  height: 0.1rem;
  background: #000;
  position: fixed;
  bottom: 0.16rem;
  left: 50%;
  margin-left: -1.34rem;
  border-radius: 0.05rem;
}

.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.reg{
    background: #ff6040;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size:20px;
}
</style>